import { Node } from "@tiptap/core";

const Video = Node.create({
  name: "video",

  group: "block",
  selectable: true,
  atom: true,

  addAttributes() {
    return {
      src: {
        default: null,
        parseHTML: (element) => element.getAttribute("src"),
      },
    };
  },

  parseHTML() {
    return [
      {
        tag: "video", // 匹配 <video> 标签
        getAttrs: (node) => {
          if (node && node.nodeType === 1 && node.tagName === "VIDEO") {
            return {
              src: node.getAttribute("src"), // 提取 src 属性
            };
          }
          return false;
        },
      },
    ];
  },

  renderHTML({ HTMLAttributes }) {
    const videoAttributes = {
      ...HTMLAttributes,
      controls: true, // 确保有控制按钮
    };
    // 使用一个 div 包裹 video 标签，并添加居中样式
    return [
      "div",
      {
        class: "video-wrapper", // 自定义类名
        // style: "text-align: center;", // 内联样式
      },
      ["video", videoAttributes],
    ];
  },
});

export default Video;
